<template>
  <!-- 人员人脸管理 -->
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="员工姓名">
              <a-input v-model="pagination.personName" placeholder="请输入员工姓名"></a-input>
            </a-form-item>
          </a-col>
          <!-- <a-col :md="8" :sm="24">
              <a-form-item label="员工ID">
                <a-input v-model="pagination.personId" placeholder="请输入员工ID"></a-input>
              </a-form-item>
            </a-col> -->
          <a-col :md="8" :sm="24">
            <div class="filter-container lesseeAdd">
              <a-button type="primary" class="btn" @click="onSearch">查询</a-button>
              <a-button class="btn" @click="onReset">重置</a-button>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="filter-container">
      <template>
        <div>
          <a-button type="primary" @click="onAdd" icon="plus">
            新增人脸
          </a-button>
        </div>
      </template>
    </div>
    <a-back-top />
    <div>
      <template>
        <a-table
          :columns="columns"
          :data-source="dataSource"
          bordered
          :loading="loading"
          :rowKey="(record) => { return record.faceId }"
          :scroll="{ x: true }"
          :pagination="pagination">
          <template slot="faceUrl" slot-scope="text,record">
            <img :src="record.faceUrl" style="width: 100px;height: 100px;" @click="onPreview(record.faceUrl)">
          </template>
          <span slot="action" slot-scope="text, record">
            <a href="javascript:;" @click="onDispatcher(record)">分发设备</a>
          </span>
        </a-table>
      </template>
    </div>
    <a-modal :visible="previewVisible" :footer="null" @cancel="previewCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
    <saveModal ref="saveModal" v-if="dialog.save" @success="tableData" @close="dialog.save = false"></saveModal>
    <dispatcherSave
      ref="dispatcherSave"
      v-if="dialog.dispatcher"
      @success="tableData"
      @close="dialog.dispatcher = false" />
  </a-card>
</template>

<script>

import saveModal from './save'
import dispatcherSave from './dispatcherSave'

import { Modal } from 'ant-design-vue'
import { getPersonFaces } from '@/api/clockingIn'

export default {
  components: { saveModal, dispatcherSave },
  data () {
    return {
      columns: [
        {
          title: '	姓名',
          dataIndex: 'personName',
          key: 'personName',
          align: 'center',
          width: 200
        },
        {
          title: '人脸图片',
          dataIndex: 'faceUrl',
          key: 'faceUrl',
          align: 'center',
          width: 200,
          scopedSlots: { customRender: 'faceUrl' }
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          align: 'center',
          // fixed: 'right',
          width: 150,
          scopedSlots: { customRender: 'action' }
        }
      ],
      dataSource: [],
      dialog: {
        save: false,
        dispatcher: false
      },
      loading: false,
      pagination: {
        // 分页配置
        pageSize: 6, // 每页显示的条数
        showQuickJumper: true, // 是否可以快速跳转到指定页
        showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
        current: 1, // 当前页数
        total: 10, // 总条数
        personName: '',
        personId: '',
        onChange: this.handlePageChange // 页码改变时的回调函数
      },
      // 是否显示预览
      previewVisible: false,
      previewImage: ''
    }
  },
  mounted () {
    this.tableData()
  },
  methods: {
    // 预览关闭
    previewCancel () {
      this.previewVisible = false
    },
    // 预览点击
    onPreview (url) {
      this.previewImage = url
      this.previewVisible = true
    },
    // 分发设备
    onDispatcher (row) {
      this.dialog.dispatcher = true
      this.$nextTick(() => {
        this.$refs.dispatcherSave.open(row)
      })
    },
    // 搜索
    onSearch () {
      this.pagination.current = 1
      this.pagination.pageSize = 6
      this.tableData()
    },
    // 重置
    onReset () {
      this.pagination = {
        // 分页配置
        pageSize: 6, // 每页显示的条数
        showQuickJumper: true, // 是否可以快速跳转到指定页
        showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
        current: 1, // 当前页数
        total: 10, // 总条数
        personName: '',
        personId: '',
        onChange: this.handlePageChange // 页码改变时的回调函数
      }
      this.tableData()
    },
    handlePageChange (page, pageSize) {
      this.pagination.current = page
      this.tableData()
    },
    // 新增人脸
    onAdd () {
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveModal.open()
      })
    },
    tableData () {
      this.loading = true
      const par = {
        ...this.pagination
      }
      getPersonFaces(par).then(res => {
        if (res.code == 200) {
          console.log(res)
          this.dataSource = res.data.datas
          this.pagination.total = res.data.total
        }
        this.loading = false
      })
    }

  }
}
</script>

<style scoped lang="less" >
.send-display-container {
  width: 100%;
  background-color: #ffffff;
  padding: 24px;
}

.filter-container {
  display: flex;
  align-items: center;
  padding-bottom: 24px;
  justify-content: left;

  .label {
    padding-right: 20px;

    white-space: nowrap;
  }

  .input-container {
    width: 300px;
    margin-right: 20px
  }

  .btn {
    margin-right: 20px;
  }
}

/deep/ .ant-modal {
  min-width: 700px;
  margin-left: 30%;
}
</style>
